<include file="public@header" />
<style>
    .controls,.col-md-2 {
        color: #999
    }

    .minwidth {
        width: 70px !important
    }


    .form-horizontal .control-group1 {
    }

    .inputw ,.w80{
        width: 80px !important;
    }
    .w160{
        width: 160px !important;
    }

    .marleft {
        margin-left: 90px !important;
    }
</style>
<php>$type=''</php>
<div class="wrap">
    <form method="post" id="form_horizontal_arr" class="form-horizontal" action="#" style="width:100%; float:left">
        <fieldset>
            <input type="hidden" name="pro_type" value="2">
            <div class="p_title">
                <span class="span_title">基础信息</span>
            </div>
            <div class="control-group1-p">
                <div class="form-group" style="width:100%">
                    <label class="control-label">状态：</label>
                    <div class="col-md-8">
                        <select class="form-control" name="mb[pro_status]" style="width: 179px">
                            <option value="1">启用</option>
                            <option value="2">停用</option>
                        </select>
                    </div>
                </div>
                <div class="form-group" >
                    <label class="control-label">产品名称：</label>
                    <div class="col-md-2" style="width: 12%">
                        <input type="text" class="form-control" name="mb[pro_name]" id="pro_name" value="" required="required">
                    </div>
                    <label class="control-label inputw">规制：</label>
                    <div class="col-md-2" style="width: 8%">
                        <select class="form-control" name="mb[regulation]" style="width: 100px">
                            <option value="1">单穴</option>
                            <option value="2">双穴</option>
                            <option value="3">三穴</option>
                        </select>
                    </div>
                    <label class="control-label inputw">碑型：</label>
                    <div class="col-md-2" style="width: 8%">
                        <select class="form-control" name="mb[stele_type]" style="width: 100px">
                            <option value="1">立碑</option>
                            <option value="2">卧碑</option>
                        </select>
                    </div>
                    <label class="control-label" style="width: 80px">占地长度：</label>
                    <div class="col-md-2" style="width: 10%;">
                        <input type="text" class="form-control" style="width: 100px" name="mb[pro_length]" required
                               value=""> mm
                    </div>
                    <label class="control-label" style="width: 80px">占地宽度：</label>
                    <div class="col-md-2" style="width: 10%">
                        <input type="text" class="form-control" style="width: 100px;" name="mb[pro_width]" required value=""> mm
                    </div>
                    <label class="control-label" style="width: 80px">墓碑总高：</label>
                    <div class="col-md-2" style="width: 10%;">
                        <input type="text" class="form-control" style="width: 100px" name="mb[pro_height]" required
                               value="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label">价格：</label>
                    <div class="col-md-2" style="width: 12%">
                        <input type="text" class="form-control"  name="mb[pro_price]" required />
                    </div>
                    <label class="control-label">产品图片：</label>
                    <div class="col-md-2">
                        <input type="hidden" name="mb[pro_photo]" id="file_path" value="">
                        <img height="36" src="" class="preview isHide" id="file_path-preview" />
                        <a class="btn btn-primary" onClick="uploadOneImage('产品图片', '#file_path')">{:lang("UPLOAD")}</a>
                        <span class="form-required">*</span>
                    </div>
                </div>
            </div>
            <div class="p_title">
                <span class="span_title">墓碑信息</span>
            </div>
            <div class="control-group1-p">
                <div class="form-group" name="base">
                    <div class="col-md-2" style="width: 27%; padding-right: 0px; padding-left: 17px;" >
                        <label class="control-label w160"> </label>
                            <input type="text" class="form-control minwidth iwidth" disabled value="宽">
                            <input type="text" class="form-control minwidth iheight" disabled value="高">
                            <input type="text" class="form-control minwidth ithick" disabled value="厚">
                    </div>
                </div>
                <div id="details"></div>
                <div class="form-group">
                    <div class="col-md-10">
                        <label class="control-label w160">基础：</label>
                        <div class="col-md-8">
                            <select class="form-control" name="mb[pro_base]"   id="select_jichu">
                                <option value="1">整石</option>
                                <option value="2">贴面</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div id="basics"></div>
                <div id="cover"></div>
                <div class="form-group">
                    <label class="control-label w160">有无栏杆：</label>
                    <div class="col-md-8">
                        <select class="form-control" name="mb[pro_railing]" id="select_langan">
                            <option value="1">有</option>
                            <option value="2">无</option>
                        </select>
                    </div>
                </div>
                <div id="railing"></div>
                <div class="form-group" style="width:100%">
                    <label class="control-label w160">有无附件：</label>
                    <div class="col-md-8">
                        <select class="form-control" name="mb[pro_annex]" id="select_fujian">
                            <option value="1">有</option>
                            <option value="2">无</option>
                        </select>
                    </div>
                </div>
                <div id="annex"> </div>
            </div>
        </fieldset>
    </form>
</div>
<script>
    $(document).ready(function () {
        var json = {$annexJson};
        var partjson = {$partJson};
        var html = "";
        $.each(json, function (i, n) {
            html += "<option value='" + n.id + "'>" + n.name + "</option>";
        })
        var catejson = {$cateJson};
        var catehtml = "<option value=''>请选择材料种类</option>";
        $.each(catejson, function (i, n) {
            catehtml += "<option value='" + n.id + "'  data-stuff_money='"+n.stuff_money+"' data-action='"+n.stuff_unit+"'>" + n.name + "</option>";
        });

        $(function () {
            $('#details').append(getArrayHtml('details',partjson.details));
            $('#basics').append(getArrayHtml('basics',partjson.basics.zs));
            $('#cover').append(getArrayHtml('cover',partjson.cover));
            $('#railing').append(getArrayHtml('railing',partjson.railing));
            $('#annex').append(getHtmlAnnex(1));
        })

        $('#select_jichu').change(function () {
            var k = $(this).val(),b_arr=[],basics='';
            $('#basics').html('');
            if (k==1){b_arr = partjson.basics.zs;
            } else {b_arr = partjson.basics.tm;}
            basics = getArrayHtml('basics',b_arr)
            $('#basics').append(basics);
        })
        $("#select_langan").change(function () {
            $('#railing').html('');
            if ($(this).val() == 1) {
                $('#railing').append(getArrayHtml('railing',railingjson));
            }
        });

        $('#select_fujian').change(function () {
            $('#annex').html('');
            if ($(this).val() == 1) {
                $('#annex').append(getHtmlAnnex(1));
            }
        })

        $(document).on('click', '#del_fujian', function () {
            $(this).parents("div[name='d_al']").remove();
        });
        $(document).on('click', '#add_fujian', function () {
            var ik = parseInt($(this).data('k'))+1;
            console.log(ik)
            $(this).data('k',ik)
            $(this).parent().parent("div").after(getHtmlAnnex(ik));
        });



        var getArrayHtml = function(name,b_arr_json,num=0){
            var arr_html ='',ii=0,p_num=0;
            $.each(b_arr_json, function (i, n) {
                ii= parseInt(num)+i;
                // n.iwidth = ii+p_num;
                // n.iheight= ii+p_num;
                // n.ithick = ii+p_num;
                // n.imaterial_price = catejson[0]['stuff_money'];
                // n.irepair_price = 850;
                // n.ichange_price = ((n.iwidth/1000)*(n.iheight/1000)*(n.ithick/1000)*n.imaterial_price*n.inumber).toFixed(2);
                arr_html+='<div class="form-group part_base" name="base">\n' +
                    '       <div class="col-md-2" style="width: 27%;padding-right: 0;padding-left: 17px;">\n' +
                    '           <label class="control-label w160" >'+n.iname+'：</label>\n' +
                    '           <input type="hidden" name="'+name+'['+ii+'][itype]" value="'+n.itype+'">\n' +
                    '           <input type="hidden" name="'+name+'['+ii+'][iname]" value="'+n.iname+'">\n' +
                    '           <input type="hidden" name="'+name+'['+ii+'][isort]" value="'+i+'">\n' +
                    '           <input type="text" class="form-control minwidth iwidth" name="'+name+'['+ii+'][iwidth]" placeholder="宽" value="'+n.iwidth+'">\n' +
                    '           <input type="text" class="form-control minwidth iheight" name="'+name+'['+ii+'][iheight]" placeholder="高" value="'+n.iheight+'">\n' +
                    '           <input type="text" class="form-control minwidth ithick" name="'+name+'['+ii+'][ithick]" placeholder="厚" value="'+n.ithick+'"> mm\n' +
                    '       </div>\n' +
                    '       <div class="col-md-2" style="width: 17%">\n' +
                    '           <label class="control-label inputw">材料种类：</label>\n' +
                    '           <div class="col-md-4">\n' +
                    '               <select class="form-control icate" name="'+name+'['+ii+'][icate]">\n' +catehtml+ '</select>\n' +
                    '           </div>\n' +
                    '       </div>\n' +
                    '       <div class="col-md-2" style="width:12%">\n' +
                    '           <label class="control-label w70">数量：</label>\n' +
                    '           <div class="col-md-4">\n' +
                    '               <input type="text" class="form-control inumber" name="'+name+'['+ii+'][inumber]" style="width:100px;"  value="'+n.inumber+'">\n' +
                    '           </div>\n' +
                    '       </div>\n' +
                    '       <div class="col-md-2" style="width:13%">\n' +
                    '           <label class="control-label w100">材料价格：</label>\n' +
                    '           <div class="col-md-4">\n' +
                    '               <input type="text" class="form-control imaterial_price" name="'+name+'['+ii+'][imaterial_price]" style="width:100px;" value="'+n.imaterial_price+'">\n' +
                    '           </div>\n' +
                    '       </div>\n' +
                    '       <div class="col-md-2" style="width:13%">\n' +
                    '           <label class="control-label w100">维修单价：</label>\n' +
                    '           <div class="col-md-4">\n' +
                    '               <input type="text" class="form-control irepair_price" name="'+name+'['+ii+'][irepair_price]" style="width:100px;" value="'+n.irepair_price+'">\n' +
                    '           </div>\n' +
                    '       </div>\n' +
                    '       <div class="col-md-2" style="width:12%">\n' +
                    '           <label class="control-label w100">更换单价：</label>\n' +
                    '           <div class="col-md-4">\n' +
                    '               <input type="text" class="form-control ichange_price" name="'+name+'['+ii+'][ichange_price]" style="width:100px;" value="'+n.ichange_price+'">\n' +
                    '           </div>\n' +
                    '       </div>\n' +
                    '   </div>';
            })
            return arr_html;
        }

        var getHtmlAnnex = function(i){
            if (i==1){
                var  add_fujian =' <div class="btn btn-primary" id="add_fujian"  data-k="'+i+'">添加附件</div>';
            } else {
                var   add_fujian =' <div class="btn btn-primary" id="del_fujian"  data-k="'+i+'">删除附件</div>';
            }
            return  '<div class="form-group part_base" name="base">\n' +
                '      <div class="col-md-2" style="width: 24%;padding-right: 0;padding-left: 17px;" >\n' +
                '       <label class="control-label w160">选择附件：</label>\n' +
                '       <div class=" ">\n' +
                '           <select class="form-control"  name="annex['+i+'][annex_id]">\n' +html+
                '           </select>\n' +
                '       </div>\n' +
                '   </div>\n' +
                '   <div class="col-md-2" >\n' +
                '       <label class="control-label inputw">数量：</label>\n' +
                '       <div class="col-md-2">\n' +
                '           <input type="text" class="form-control" style="width: 70px" name="annex['+i+'][anumber]" value="1">\n' +
                '       </div>\n' +
                '   </div>\n' +
                '   <div class="col-md-2" name="fujian" style=" width:50%">\n' +add_fujian+
                '   </div>\n' +
                '</div>';
        }
        $(document).on('blur',".iwidth",function(){
            var obj = $(this).closest('.part_base');
            price_count(obj)
        });
        $(document).on('blur',".iheight",function(){
            var obj = $(this).closest('.part_base');
            price_count(obj)
        });
        $(document).on('blur',".ithick",function(){
            var obj = $(this).closest('.part_base');
            price_count(obj)
        });
        $(document).on('blur',".imaterial_price",function(){
            var obj = $(this).closest('.part_base');
            price_count(obj)
        })
        // 主要
        $(document).on('change',".icate",function(){
            var obj = $(this).closest('.part_base');
            var stuff_money = obj.find('.icate').children('option:selected').data('stuff_money');
            obj.find('.imaterial_price').val(stuff_money)
            price_count(obj)
        });

        var price_count = function(obj){
            var iwidth = obj.find('.iwidth').val()/1000,
                iheight = obj.find('.iheight').val()/1000,
                ithick = obj.find('.ithick').val()/1000,
                imaterial_price =  obj.find('.imaterial_price').val();
            console.log(iwidth)
            console.log(iheight)
            console.log(ithick)
            var change_price = 0;
            if(iwidth != '' && iheight !='' && ithick !=''  && imaterial_price != ''){
                change_price = iwidth*iheight*ithick*imaterial_price;
                change_price = change_price.toFixed(2);
            }
            obj.find(".ichange_price").val(change_price);
        };


    })
</script>